<template>
  <!-- 添加分类表单 -->
  <div class="add-cate-container">
    <div class="title">添加分类</div>
    <el-form :model="ruleForm" :rules="rules" ref="myForm" label-width="100px" class="demo-ruleForm" label-position="right">
      <el-form-item label="分类名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <!-- 分类级别 -->
      <el-form-item label="分类级别" prop="level">
        <el-select v-model="ruleForm.level" placeholder="请选择分类级别">
          <el-option label="一级" value="一级"></el-option>
          <el-option label="二级" value="二级"></el-option>
        </el-select>
      </el-form-item>
      <!-- 上级分类 -->
      <el-form-item label="上级分类" prop="super">
        <el-select v-model="ruleForm.super" placeholder="请选择上级分类">
          <el-option label="无上级分类" value="0"></el-option>
          <el-option v-for="item in allCateGoryList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <!-- 是否在导航栏显示 -->
      <el-form-item label="是否显示在导航栏" prop="nav_show">
        <el-switch v-model="ruleForm.nav_show"></el-switch>
      </el-form-item>
      <!-- 是否显示 -->
      <el-form-item label="是否显示" prop="is_show">
        <el-switch v-model="ruleForm.is_show"></el-switch>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm(myForm)" :loading="loading">提交</el-button>
        <el-button @click="resetForm(myForm)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from '@/utils/request.js'

const myForm = ref(null)
let loading = ref(false)

let allCateGoryList = ref([])
// 这是表单验证
let ruleForm = reactive({
  name: '',
  level: '',
  super: '',
  nav_show: false,
  is_show: false
})
let rules = reactive({
  name: [
    { required: true, message: '请输入分类名称', trigger: 'blur' },
    { min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur' }
  ]
})

// 创建路由对象
const router = useRouter()

// 添加分类
const submitForm = (formName) => {
  formName.validate(async (valid) => {
    if (valid) {
      let body = {}
      if (ruleForm.super !== '0') {
        body = {
          cate_name: ruleForm.name,
          level: ruleForm.level,
          super_id: ruleForm.super,
          is_show: ruleForm.is_show,
          nav_show: ruleForm.nav_show
        }
      } else {
        body = {
          cate_name: ruleForm.name,
          level: ruleForm.level,
          is_show: ruleForm.is_show,
          nav_show: ruleForm.nav_show
        }
      }
      loading.value = true
      try {
        const data = await axios.post('/bus/add/category', body)
        if (data.code === 0) {
          ElMessage({
            message: data.msg,
            type: 'success'
          })
          getCategoryList()
        } else {
          ElMessage({
            message: data.msg,
            type: 'error'
          })
        }
      } catch {
        ElMessage.error('提交失败！')
      } finally {
        formName.resetFields()
        ruleForm.name = ''
        ruleForm.level = ''
        ruleForm.super = ''
        ruleForm.nav_show = false
        ruleForm.is_show = false
        loading.value = false
      }
    } else {
      return false
    }
  })
}

// 重置表单
const resetForm = (formName) => {
  formName.resetFields()
  ruleForm.name = ''
  ruleForm.level = ''
  ruleForm.super = ''
  ruleForm.nav_show = false
  ruleForm.is_show = false
}

// 获取分类列表
const getCategoryList = async () => {
  try {
    const data = await axios.get('/bus/category/list')
    if (data.code === 0) {
      allCateGoryList.value = data.data
    } else if (data.msg === '身份认证失败' || data.code === 403) {
      ElMessage({
        message: data.msg,
        type: 'error'
      })
      localStorage.removeItem('bus_token')
      router.replace('/login')
    }
  } catch (err) {
    ElMessage.error('请求失败！')
  }
}
getCategoryList()
</script>

<style lang="scss" scoped>
.add-cate-container {
  border: 1px solid #e1e1e1;
  margin: 50px auto;
  width: 860px;
  min-height: 80vh;

  .title {
    font-size: 20px;
    color: #606266;
    font-weight: 700;
    text-align: center;
    margin: 50px 0;
  }
  form {
    width: 60%;
    margin: 0 auto;
  }

  :deep(.el-form-item__label) {
    width: 130px !important;
  }
  :deep(.el-input) {
    max-width: 80%;
  }
}
</style>
